<template>
  <div class="panel admin-panel">
    <div class="panel-head" id="add">
      <strong><span class="icon-pencil-square-o"></span>增加类别</strong>
    </div>
    <div class="body-content form-x">
      <div class="form-group">
        <div class="label">
          <label>类别名称：</label>
        </div>
        <div class="field">
          <input type="text" v-model="name" name="name"/>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>父类别：</label>
        </div>
        <div class="field">
          <select v-model="parentid">
            <option selected="selected" :value="1">-请选择-</option>
            <option v-for="category in categories" :value="category.id">{{category.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>是否显示：</label>
        </div>
        <div class="field">
          <input type="radio" v-model="showindex" :value="1" checked="checked"/>是
          <input type="radio" v-model="showindex" :value="2"/>否
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" @click="addtoServer">
            提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    props: {
      categories: Array,
      add: Function
    },
    data() {
      return {
        name: "",
        parentid: "1",
        showindex: "1"
      }
    },
    name: "CategoryAdd",
    methods: {
      addtoServer() {
        let that = this;
        axios.post(this.apiUrl + "/category/add", {
          name: this.name,
          parentid: this.parentid == "1" ? "" : this.parentid,
          showindex: this.showindex == '1' ? "y" : "n"
        }).then(function (r) {
          console.log(r)
          that.add(r.data.data);
        })
      }
    }
  }
</script>

<style scoped>

</style>
